<template>
  <div class="main">
    <div  ref="topDiv">
    <!-- <Top /> -->
    </div>

    <Customer v-show="!isPick" @sel-customer="() => (isPick = true)" />
    <div class="part" :key="isPick ? 1 : 0" v-show="isPick">
      <Part class="part-component"  />
      <Part class="part-component"  />
    </div>

    <!-- <div class="bottom"> -->
        <!-- <div class="left"><Left /></div>
        <div class="right"> <Right /></div> -->
        <!-- <GoodsComment /> -->
    <!-- </div> -->
  </div>

  <Confirm
    v-model:show="confirmShow"
    :height="`0.5rem`"
    :width="`2rem`"
    @confirm="confirm"
  >
    <div class="confirm-text">
      <img class="warn-img" :src="publicUrl(`/images/warn-big.png`)" />
      <span>未保存的订单将会丢失,确定要切换客户吗?</span>
    </div>
  </Confirm>
</template>
<script setup lang="ts" name="">
import Customer from "./components/Customer/index.vue";
import Top from "./components/Top/index.vue";
import Part from "./components/Part/index.vue";

import { Customer as CustomerStore } from "@/stores/modules/Customer";
import { ref } from "vue";


import GoodsComment from "@/components/GoodsComment/index.vue";
import mitt from "@/utils/mittBus";
import Confirm from "@/components/Confirm/index.vue";
import { publicUrl } from "@/utils/util";

const topDiv = ref<any>(undefined);

const customer = CustomerStore();
const confirmShow = ref<boolean>(false);
// const isPick = ref<boolean>(customer.isPick);
const isPick = ref<boolean>(false);   //是否选中客户
mitt.on("customerChange", () => {
  confirmShow.value = true;
});
const confirm = () => {
  isPick.value = false;
  // nextTick(() => {
    // console.dir(topDiv.value, "topDiv.value.offsetTop");

    document.documentElement.scrollTop = topDiv.value.offsetHeight * 1.5;
  // });
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
